<template>
	<view>
		<view class="search-box">
		  <uni-search-bar  @input="input" :radius="100" cancelButton="none"></uni-search-bar>
		</view>
    
    <!-- 搜索建议列表 -->
    <view class="sugg-list" v-if="searchResult.length !== 0">
      <view class="sugg-item" v-for="(item,i) in searchResult" :key="i" @click="gotoDetail(item)">
        <view class="goods-name">{{item.goods_name}}</view>
        <uni-icons type="arrowright" size="16"></uni-icons>
      </view>
    </view>
    
    <!-- 搜索历史 -->
    <view class="histroy-box" v-else>
      <!-- 标题区域 -->
      <view class="histroy-title">
        <text>搜索历史</text>
         <uni-icons type="trash" size="17" @click="cleanHistroy"></uni-icons>
      </view>
      <!-- 列表区域 -->
      <view class="histroy-list">
        <uni-tag :text="item" v-for="(item,i) in histories" :key="i" @click="gotoGoods_List(item)"></uni-tag>
      </view>
    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
        //延时器id
				timer:null,
        kw:'',
        //搜索结果例表
        searchResult:[],
        // 搜索历史的数组
        histroyList:[]
			};
		},
    onLoad() {
    this.histroyList= JSON.parse(uni.getStorageSync('kw')||'[]')
    },
    methods:{
      // 输入框处理函数
      input(e){
        // console.log(e)
        clearTimeout(this.trimer)
     this.trimer= setTimeout(()=>{
       this.kw=e
       //根据关键字,查询搜索建议列表
       this.getSearchList()
      },500)
      },
      // 根据搜索关键词搜索商品建议列表
     async getSearchList(){
        // 判断关键词是否为空
        if(this.kw===''){
          this.searchResult=[]
          return
        }
       const {data:res}= await uni.$http.get('/api/public/v1/goods/qsearch',{query:this.kw})
       if(res.meta.status!==200){
         return uni.$showMsg()
       }
       this.searchResult=res.message
       
       // 保存搜索关键词
       this.saveSearchHistory()
      },
      //跳转到商品详情页面
      gotoDetail(item){
       // console.log(item.goods_id)
       uni.navigateTo({
         url:'/subpkg/goods_detail/goods_detail?goods_id='+item.goods_id
       })
      },
      // 保存搜索关键词函数
      saveSearchHistory(){
        // this.histroyList.push(this.kw)
        // 将数字转化成set对象
        const set= new Set(this.histroyList)
        // 移除旧的关键字
        set.delete(this.kw)
        // 追加新的关键字
        set.add(this.kw)
        // 将set转化成数组
       this.histroyList= Array.from(set)
        // console.log(set)
        // 将搜索关键词永久保存到本地 数组转化成字符串
        uni.setStorageSync('kw',JSON.stringify(this.histroyList))
      },
      //清空历史记录
      cleanHistroy(){
        this.histroyList=[],
        uni.setStorageSync('kw','[]')
      },
      // 跳转到商品列表页面
      gotoGoods_List(kw){
        uni.navigateTo({
          url:'/subpkg/goods_list/goods_list?query='+kw
        })
      }
    },
    computed:{
      histories(){
      return  [...this.histroyList].reverse()
      }
    }
	}
</script>

<style lang="scss">
.search-box{
  background-color: #C00000;
  position: sticky;
  top: 0;
  z-index: 999;
}
.sugg-list{
  padding: 0 5px;
  .sugg-item{
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 12px;
      padding: 13px 0;
      border-bottom: 1px solid #efefef;
    .goods-name{
      //文本不换行
      white-space: nowrap;
      //隐藏不换行的文本
      overflow: hidden;
      //隐藏部分用...来代替
      text-overflow: ellipsis;
    }
  }
}
.histroy-box{
 padding: 0 5px;
  .histroy-title{
    display: flex;
    justify-content: space-between;
    height: 40px;
    align-items: center;
    font-size: 13px;
    border-bottom: 1px solid #efefef;
  }
  .histroy-list{
    display: flex;
    flex-wrap: wrap;
    .uni-tag{
      margin-top: 5px;
      margin-right: 5px;
    }
  }
}
</style>
